<template>
    <div class="修改信息状态">
        <el-dialog
            title="修改用户信息"
            :visible="dialogFormVisible"
            @close="$emit('closeDialog')"
            width="50%"
        >
            <el-form :label-position="labelPosition" label-width="150px" :model="updateForm">
                <el-form-item label="状态(1:未读, 2:已读)">
                    <el-input v-model="updateForm.status"></el-input>
                </el-form-item>
                <!-- <el-form-item label="url">
                    <el-input v-model="updateForm.avatar_url"></el-input>
                </el-form-item> -->
                <!-- <imgUpload @uploaded="uploaded" @uploadFail="uploadFail" :size="500"></imgUpload> -->
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="$emit('closeDialog')">取 消</el-button>
                <el-button type="primary" @click="submit">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
export default {
    name: "UserUpdate",
    props: ["dialogFormVisible", "toChangeRow"],
    data() {
        return {
            labelPosition: "right",
            updateForm: {
                status: "",
            },
            imageUrl: "",
            OldImageUrl: "",
            // uploadApi: "http://127.0.0.1:8000/api/img/uploadImg"
        };
    },
    watch: {
        toChangeRow: function(obj) {
            this.updateForm = { ...obj };
            // this.OldImageUrlp=obj.avatar_url;
        }
    },
    methods: {
        submit: async function() {
            let data = await this._axios
                .post("/api/msg/read", this.updateForm)
                .then(data => data.data);
            console.log(data);
            if (data) {
                this.$alert(`${data.msg}`, {
                    confirmButtonText: "确定",
                    callback: () => {
                        this.$message({
                            type: "warning",
                            message: `${data.msg}`
                        });
                        this.$emit("refresh");
                    }
                });
            }
        },
        uploaded:function(res){
            console.log(res);
            this.OldImageUrl = this.updateForm.avatar_url;
            this.updateForm.avatar_url = res.path;
        },
        uploadFail:function(res){
            console.log(res);
            //上传错误处理
            
        }

    },
};
</script>

<style lang="scss">
.updateForm {
    .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }
    .avatar-uploader .el-upload:hover {
        border-color: #409eff;
    }
    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 178px;
        height: 178px;
        line-height: 178px;
        text-align: center;
    }
    .avatar {
        width: 178px;
        height: 178px;
        display: block;
    }
}
</style>